<template>
  <div class="cont">
    <!-- 搜索工作栏 -->
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      class="cont_top"
      label-width="80px"
      @submit.prevent="handleQuery"
    >
      <el-form-item style="margin-right: 12px">
        <el-button
          link
          type="primary"
          @click="addMessage"
          class="btnhover"
          style="
            width: 90px;
            height: 30px;
            background-color: #ff9900;
            color: rgba(255, 255, 255, 1);
          "
          >新增消息</el-button
        >
      </el-form-item>
      <el-form-item label="推送对象" prop="title" style="margin-right: 17px" width="auto">
        <el-input
          v-model="queryParams.userName"
          placeholder=""
          @keyup.enter="handleQuery"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item style="margin-right: 0">
        <el-button @click="handleQuery" class="btn btnsearch">查询</el-button>
        <el-button @click="resetQuery" class="btn btnreset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="Loading..."
      :data="list"
      style="margin-bottom: 20px; min-height: 435px"
      :header-cell-style="{ background: '#F0F0F0' }"
    >
      <el-table-column align="center" label="标题" width="200">
        <template #default="scope">
          <div class="namecont" :title="scope.row.messageCenterDO.title">
            {{ scope.row.messageCenterDO.title }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="消息分类" prop="messageCenterDO.type">
        <template #default="scope">
          {{
            scope.row.messageCenterDO.type == '1'
              ? '紧急警报'
              : scope.row.messageCenterDO.type == '2'
                ? '活动通知'
                : '政策通知'
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="消息内容" width="200">
        <template #default="scope">
          <div class="namecont" :title="scope.row.messageCenterDO.content">
            {{ scope.row.messageCenterDO.content }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="推送对象" prop="userName" width="auto" />
      <el-table-column align="center" label="推送渠道" prop="messageCenterDO.sendType" width="auto">
        <template #default="scope">
          {{ scope.row.messageCenterDO.sendType == '1' ? '短信' : '小程序' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="推送结果" prop="result" width="100">
        <template #default="scope">
          <div class="namecont" :title="scope.row.result">
            {{ scope.row.result }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建人" prop="creator" width="auto" />
      <el-table-column
        align="center"
        label="推送时间"
        prop="messageCenterDO.createTime"
        width="200"
      >
        <template #default="scope">
          {{ formatDate(scope.row.createTime, 'YYYY-MM-DD HH:mm ') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100" fixed="right">
        <template #default="scope">
          <el-button
            link
            type="primary"
            class="btnhover"
            @click="messageDetail(scope.row)"
            style="color: #3c88f0"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="font-size: 14px"
      v-model:current-page="queryParams.pageNo"
      :hide-on-single-page="value"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="pageSizes"
      layout="total,sizes,prev, pager, next,jumper"
      :total="total"
      @size-change="selectchange"
      @current-change="handleCurrentChange"
    />
  </div>
  <AddDialog v-model:visible="editDialogVisible" @getAdd="getAdd" :editData="editData" />
  <MessageDetail v-model:visible="messageVisible" :editData="editData" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import AddDialog from './components/addDialog.vue'
import MessageDetail from './components/messageDetail.vue'
import { formatDate } from '@/utils/formatTime'
import * as getMessageApi from '@/api/messageCenter/index'

const loading = ref(true) // 列表加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const value = ref(true)
const pageSizes = [10, 20, 50, 100]
const editDialogVisible = ref(false)
const messageVisible = ref(false)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  userName: ''
})
const queryFormRef = ref() // 搜索的表单
const editData = ref({})
let treeData = ref([])

/** 新增消息 */
const addMessage = () => {
  editDialogVisible.value = true
  editData.value = {}
  editData.value.pageNo = 1
}
// 消息详情
const messageDetail = (row) => {
  messageVisible.value = true
  editData.value = {}
  editData.value.id = row.id
}

const getAdd = (val) => {
  handleCurrentChange(val)
}
/** 条数变化 */
const selectchange = (e) => {
  queryParams.pageSize = e
  queryParams.pageNo = 1
  getList()
}
/** 页码变化 */
const handleCurrentChange = (e) => {
  queryParams.pageNo = e
  getList()
}

/** 查询任务列表 */
const getList = async () => {
  const params = {
    pageNo: queryParams.pageNo,
    pageSize: queryParams.pageSize,
    userName: queryParams.userName
  }
  getMessageApi
    .getMessagePage(params)
    .then((res) => {
      let data = reactive(res.list)
      total.value = res.total
      list.value = data
      if (list.value.length === 0) {
        value.value = true
      } else {
        value.value = false
      }
      loading.value = false
    })
    .catch((error) => {
      loading.value = false
    })
}

/** 查询按钮操作 */
const handleQuery = () => {
  queryParams.userName = queryParams.userName
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  console.log('111111111111')
  // queryFormRef.value.resetFields()
  queryParams.userName = undefined
  handleQuery()
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style scoped>
.cont {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  min-height: 557px;
  position: relative;
}

.cont_top {
  text-align: left;
  margin: 4px 0;
}

::v-deep .el-table .cell {
  display: flex;
  justify-content: center;
}

::v-deep .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #cc352f;
}

::v-deep .el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px #cc352f;
}

.btn {
  width: 80px;
  height: 30px;
  line-height: 20px;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
}

.btnreset {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(187, 187, 187, 1);
  color: rgba(142, 142, 142, 1);
}

.btnsearch {
  background-color: #cc352f;
  color: rgba(255, 255, 255, 1);
  border: 1px solid #cc352f;
}

.btn:hover {
  opacity: 0.8;
}

.btnhover:hover {
  opacity: 0.8;
}

.el-pagination {
  justify-content: center;
}

.namecont {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

::v-deep .el-form-item__label {
  padding: 0 17px 0 0;
}

.tabtop {
  width: 100%;
  height: 49px;
  border-bottom: 1px solid rgba(228, 228, 228, 1);
  text-indent: 14px;
  text-align: left;
  line-height: 52px;
  /* margin-bottom: 10px; */
  display: flex;
  justify-content: space-between;
}

.tabcont {
  width: calc(100% -3px);
  height: 40px;
  text-align: left;
  margin-bottom: 5px;
  color: #8e8e8e;
  cursor: pointer;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  border-right: 3px solid #fff;
}

.selected {
  border-right: 3px solid #cc352f;
  color: #cc352f;
  height: 40px;
  line-height: 40px;
  background-color: rgba(188, 79, 79, 0.13);
}

@media screen and (min-width: 1700px) {
  .heightclass {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 832px) and (max-width: 1000px) {
  .heightclass {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 670px) and (max-width: 765px) {
  .heightclass {
    display: flex;
    justify-content: space-between;
  }
}
</style>
